<template>
  <div class="row">
    <div class="col-md-12">
      <!--桥梁类型分类统计-->
      <div class="row">
        <div class="col-md-4">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">桥梁类型分布</h3>
            </div>
            <div class="box-body">
              <div id="structureTypeCharts" style="height: 150px;"></div>
            </div>
          </div>
        </div>

        <div class="col-md-8">
          <div class="box box-warning">
            <div class="box-header with-border">
              <h3 class="box-title">桥梁类型统计表</h3>
            </div>
            <div class="box-body">
              <el-table
                style="height: 150px;"
                :data="[structureTypeStatData]"
                show-overflow-tooltip
                border>
                <el-table-column label="梁式桥" align="center">
                  <el-table-column label="数量" prop="beamBridgeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="beamBridgeRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="板拱桥、肋拱桥等" align="center">
                  <el-table-column label="数量" prop="arcOneBridgeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="arcOneBridgeRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="刚架拱桥、桁架拱桥" align="center">
                  <el-table-column label="数量" prop="arcTwoBridgeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="arcTwoBridgeRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="钢-混凝土组合拱桥" align="center">
                  <el-table-column label="数量" prop="tiedArcBridgeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="tiedArcBridgeCount" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="斜拉桥" align="center">
                  <el-table-column label="数量" prop="cableBridgeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="cableBridgeRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="悬索桥" align="center">
                  <el-table-column label="数量" prop="susBridgeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="susBridgeRatio" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <!--桥龄统计-->
      <div class="row">
        <div class="col-md-4">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">桥龄分布</h3>
            </div>
            <div class="box-body">
              <div id="bridgeAgeCharts" style="height: 150px;"></div>
            </div>
          </div>
        </div>

        <div class="col-md-8">
          <div class="box box-warning">
            <div class="box-header with-border">
              <h3 class="box-title">桥龄统计表</h3>
            </div>
            <div class="box-body">
              <el-table
                style="height: 150px;"
                :data="[bridgeAgeStatData]"
                show-overflow-tooltip
                border>
                <el-table-column label="桥龄>=30年" align="center">
                  <el-table-column label="数量" prop="moreThanThirty" align="center"></el-table-column>
                  <el-table-column label="占比" prop="moreThanThirtyRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="桥龄20～30年" align="center">
                  <el-table-column label="数量" prop="lessThanThirty" align="center"></el-table-column>
                  <el-table-column label="占比" prop="lessThanThirtyRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="桥龄10～20年" align="center">
                  <el-table-column label="数量" prop="lessThanTwenty" align="center"></el-table-column>
                  <el-table-column label="占比" prop="lessThanTwentyRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="桥龄<10年" align="center">
                  <el-table-column label="数量" prop="lessThanTen" align="center"></el-table-column>
                  <el-table-column label="占比" prop="lessThanTenRatio" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <!--桥梁等级统计-->
      <div class="row">
        <div class="col-md-4">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">桥梁等级分布</h3>
            </div>
            <div class="box-body">
              <div id="bridgeLevelCharts" style="height: 150px;"></div>
            </div>
          </div>
        </div>

        <div class="col-md-8">
          <div class="box box-warning">
            <div class="box-header with-border">
              <h3 class="box-title">桥龄统计表</h3>
            </div>
            <div class="box-body">
              <el-table
                style="height: 150px;"
                :data="[bridgeLevelStatData]"
                show-overflow-tooltip
                border>
                <el-table-column label="一类桥" align="center">
                  <el-table-column label="数量" prop="levelOneCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="levelOneRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="二类桥" align="center">
                  <el-table-column label="数量" prop="levelTwoCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="levelTwoRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="三类桥" align="center">
                  <el-table-column label="数量" prop="levelThreeCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="levelThreeRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="四类桥" align="center">
                  <el-table-column label="数量" prop="levelFourCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="levelFourRatio" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="五类桥" align="center">
                  <el-table-column label="数量" prop="levelFiveCount" align="center"></el-table-column>
                  <el-table-column label="占比" prop="levelFiveRatio" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from "../../../echarts"
  import {doGet} from "../../../assets/js/utils/RequestUtils";
  import {getStructureTypeChartsOption, getBridgeAgeStatOption, getBridgeLevelChartsOption} from "../../../assets/js/utils/ViewUtils";

  const STRUCTURE_TYPE_URL = "/stat/bridgeClassStat/getStructureTypeStatData",
    BRIDGE_AGE_URL = "/stat/bridgeClassStat/getBridgeAgeStatData",
    BRIDGE_LEVEL_URL = "/stat/bridgeClassStat/getBridgeLevelStatData";

  export default {
    name:"BridgeClassStat",
    data() {
      return {
        structureTypeCharts:null,
        structureTypeStatData:{},
        bridgeAgeCharts:null,
        bridgeAgeStatData:{},
        bridgeLevelCharts:null,
        bridgeLevelStatData:{}
      }
    },
    methods:{
      initCharts() {
        this.structureTypeCharts = echarts.init(document.getElementById("structureTypeCharts"));
        this.bridgeAgeCharts = echarts.init(document.getElementById("bridgeAgeCharts"));
        this.bridgeLevelCharts = echarts.init(document.getElementById("bridgeLevelCharts"));
      },
      fetchStructureTypeData() {
        this.structureTypeCharts.showLoading();
        doGet(STRUCTURE_TYPE_URL, {component:this})
          .then(response=>{
            this.structureTypeStatData = response;
            this.structureTypeCharts.setOption(getStructureTypeChartsOption(response))
          }).finally(()=>this.structureTypeCharts.hideLoading());
      },
      fetchBridgeAgeData() {
        this.bridgeAgeCharts.showLoading();
        doGet(BRIDGE_AGE_URL, {component:this})
          .then(response=>{
            this.bridgeAgeStatData = response;
            this.bridgeAgeCharts.setOption(getBridgeAgeStatOption(response));
          }).finally(()=>this.bridgeAgeCharts.hideLoading())
      },
      fetchBridgeLevelData() {
        this.bridgeLevelCharts.showLoading();
        doGet(BRIDGE_LEVEL_URL, {component:this})
          .then(response=>{
            this.bridgeLevelStatData = response;
            this.bridgeLevelCharts.setOption(getBridgeLevelChartsOption(response));
          }).finally(()=>this.bridgeLevelCharts.hideLoading());
      }
    },
    mounted() {
      this.initCharts();
      this.fetchStructureTypeData();
      this.fetchBridgeAgeData();
      this.fetchBridgeLevelData();
    }
  }
</script>



// WEBPACK FOOTER //
// BridgeClassStat.vue?56e7639e
